<template>
	<view class="container">
		<sa-tabs :tabList="tabs" @onClickTab="tabChange"></sa-tabs>
		<view class="prize-area">
			<view class="prize-item" v-for="item in prizes" :key="item.id">
				<template v-if="item.type == 1">
					<view class="card-left">
						<image :src="item.prizeUrl || '/static/logo.png'" class="prize-img" mode="aspectFill">
						</image>
					</view>
					<view class="card-right">
						<p class="card-info">{{item.prizeName}}</p>
						<strong class="card-time">{{formatDateTime(item.createTime)}}</strong>
						<p class="card-id">店铺: {{item.shopName}}</p>
						<p class="card-code">核销码:{{item.id.slice(-4)}}</p>
					</view>
					<view class="seal" :class="item.useTime ? '': 'has'">
						<view class="seal-son" :class="item.useTime ? '': 'has'">
							<template v-if="!item.useTime">
								<span class="wait-check">待核销</span>

							</template>
							<template v-else>
								<span class="has-check">已核销</span>
								<span
									style="position: absolute;top: 66rpx;text-align: center;font-size: 20rpx;transform: rotate(-45deg);left: 40rpx;color: #B4B4B4;">{{formatDateTime(item.useTime)}}</span>
							</template>

						</view>
					</view>
				</template>
				<template v-else-if="item.type == 2">
					<view class="card">
						<view class="card-left">{{priceTransform(item.price,2,'')}}<text class="card-unit">元</text>
						</view>
						<view class="card-right">
							<view class="shop-name">{{item.shopName}}</view>
							<view class="card-info">抵扣券</view>
							<strong class="card-time" v-if="item.status == 0">{{formatDateTime(item.expirationTime)}} 后过期</strong>
							<strong class="card-time" v-else-if="item.status == 1">{{formatDateTime(item.useTime)}} 使用</strong>
							<strong class="card-time" v-else-if="item.status == 2">已过期</strong>
						</view>
						<view class="card-use" v-if="item.status == 0">
							<uni-tag text="去使用" type="error" :inverted="true" @click="gotoShop(item.shopId)"></uni-tag>
						</view>
					</view>
				</template>
			</view>
			<uni-load-more :status="status" />
		</view>
	</view>
</template>

<script>
	import {
		getMyPrize
	} from '@/api/consomer/myPrizes/myPrizes.js'
	import {
		transform
	} from '@/minix/mixin.js'
	export default {
		mixins: [transform],
		data() {
			return {
				tabs: [{
					text: '待核销'
				}, {
					text: "已核销"
				}],
				shopId: '',
				shopName: '',
				shopLogo: '',
				prizes: [],

				prizeStatus: 0,

				status: 'more',
				current: 1,
			}
		},
		onLoad() {
			this.init()
		},
		onPullDownRefresh() {
			this.current = 1
			this.prizes = []
			this.init()
		},

		onReachBottom() {
			if (this.status === 'noMore') {
				return
			}
			this.current++
			this.init()
		},
		methods: {
			init() {
				this.status = 'loading'
				getMyPrize({
					status: this.prizeStatus,
					current: this.current
				}).then((res) => {
					if (this.current == 1) {
						this.totalPage = res.totalPage
					}
					if (this.totalPage <= this.current) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
					if (res.list.length > 0) {
						this.prizes.push(...res.list)
					}
				}).catch((res) => {
					this.status = 'noMore'
				}).finally(() => {
					uni.stopPullDownRefresh()
				})

			},
			tabChange(e) {
				this.prizeStatus = e.index
				this.current = 1
				this.prizes = []
				this.init()
			},
			gotoShop(shopId) {
				uni.redirectTo({
					url:'/pages/shopInfo/shopInfo?shopId=' + shopId
				})
			}
		}
	}
</script>

<style lang="scss">
	.prize-area {
		background-color: #fff;
		height: 100vh;
		padding: 5px 0 0 0;
		width: 95%;
		margin: 0 auto;
		border-radius: 10px;
		margin-top: 10px;
	}

	.prize-img {
		width: 80px;
		height: 80px;
	}

	.prize-content {
		flex: 1;
	}


	.card {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 8px;
		height: 100px;
		/*其他样式*/
		-webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, red 4.5px), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
		-webkit-mask-size: 100%, 2px 4px;
		-webkit-mask-repeat: repeat, repeat-y;
		-webkit-mask-position: 0 -4px, 87px;
		-webkit-mask-composite: source-out;
		mask-composite: subtract;
		width: 95%;
		margin: 0 auto;
		margin-bottom: 10px;
		box-shadow: 0 0 2px 1px #ccc;
	}

	.card-id {
		font-size: 14px;
		font-weight: 600;
	}

	.card-code {
		font-size: 18px;
		font-weight: bold;
	}

	.card-left {
		width: 88px;
		text-align: center;
		font-size: 24px;
		color: #F22424;
		font-weight: bold;
	}

	.card-left span {
		font-size: 10px;
	}

	.card-right {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.card-info {
		margin: 0;
		font-size: 16px;
		line-height: 20px;
		color: rgba(33, 32, 44, 0.9);
		font-weight: bold;
	}

	.card-time {
		font-size: 16px;
		line-height: 16px;
		font-weight: normal;
		color: #F22424;
		margin-top: 4px;
	}

	.seal {
		width: 160rpx;
		height: 160rpx;
		border: solid 6rpx #B4B4B4;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.8);
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

		&.has {
			border: solid 6rpx $base-color;
		}
	}

	.seal-son {
		width: 145rpx;
		height: 145rpx;
		border: solid 2rpx #B4B4B4;
		border-radius: 100%;
		background-color: rgba(255, 255, 255, 0.8);
		position: relative;

		&.has {
			border: solid 2rpx $base-color;
		}

		.wait-check {
			position: absolute;
			top: 50rpx;
			left: 20rpx;
			text-align: center;
			font-size: 14px;
			transform: rotate(-45deg);
			color: $base-color;
			font-weight: 900;
		}

		.has-check {
			position: absolute;
			top: 32rpx;
			text-align: center;
			font-size: 14px;
			transform: rotate(-45deg);
			right: 40rpx;
			color: #B4B4B4;
			font-weight: 900;
		}

		.has-check-time {
			position: absolute;
			top: 66rpx;
			text-align: center;
			font-size: 20rpx;
			transform: rotate(-45deg);
			left: 40rpx;
			color: #B4B4B4;
		}
	}

	.card {
		display: flex;
		align-items: center;
		background: #fef0ef;
		border-radius: 8px;
		-webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, red 4.5px), radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
		-webkit-mask-size: 100%, 2px 4px;
		-webkit-mask-repeat: repeat, repeat-y;
		-webkit-mask-position: 0 -4px, 87px;
		-webkit-mask-composite: source-out;
		mask-composite: subtract;
		margin: 0 auto;
		margin-top: 8px;
	}

	.card-left {
		width: 88px;
		text-align: center;
		font-size: 24px;
		color: #fe3a31;

		.card-unit {
			font-size: 12px;
		}
	}

	.card-left span {
		font-size: 10px;
	}

	.card-right {
		padding: 16px 12px;
		display: flex;
		flex: 1;
		flex-direction: column;

		.card-info {
			margin: 0;
			font-size: 14px;
			font-weight: bold;
			line-height: 20px;
			color: rgba(33, 32, 44, 0.9);
		}

		.card-time {
			font-size: 12px;
			line-height: 16px;
			font-weight: normal;
			color: #a9a09f;
			margin-top: 4px;
		}
	}
	.card-use{
		margin-right: 5px;
	}
</style>